<template>
  <div>
      <div class="werapp">
         <Heard class="box1"></Heard>
         <Input class="box2"></Input>
         <Todolist></Todolist>
      </div>
  </div>
</template>

<script>
import Heard from './heard.vue';
import Input from './input.vue';
import Todolist from './todolist.vue';
  export default {
    components: {
      Heard,
      Input,
      Todolist,
    },
    name:"HelloWorld",
  }
</script>

<style scoped>
.werapp{
  width: 360px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 30px 40px 20px;
}
.box1{
  height: 88px;
}
.box2{
  text-align: center;
}
</style>